import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
import _applyDecoratedDescriptor from "@babel/runtime/helpers/esm/applyDecoratedDescriptor";
import _isFunction from "lodash/isFunction";

var _dec, _dec2, _dec3, _dec4, _dec5, _class;

/**
 * SubMenuWrap 所有弹出菜单的组合组件
 * @example
 * interface SubMenuWrapProps {
 *   menuItemHeight: number; // 菜单高度
 *   leafMenuItemHeight: number; // 叶子菜单高度
 * }
 */
import React from 'react';
import classNames from 'classnames';
import { Bind } from 'lodash-decorators';
import SubMenu from "./SubMenu";
import LeafMenu from "./LeafMenu";
import styles from "./styles.less?modules";
import { getMenuKey, leafMenuItemHeight as defaultLeafMenuItemHeight, menuItemHeight as defaultMenuItemHeight } from "./utils";
var SubMenuWrap = (_dec = Bind(), _dec2 = Bind(), _dec3 = Bind(), _dec4 = Bind(), _dec5 = Bind(), (_class = /*#__PURE__*/function (_React$PureComponent) {
  _inherits(SubMenuWrap, _React$PureComponent);

  var _super = _createSuper(SubMenuWrap);

  function SubMenuWrap(props) {
    var _this;

    _classCallCheck(this, SubMenuWrap);

    _this = _super.call(this, props);
    _this.cacheStyle = {};
    _this.state = {
      hoverSubMenu: null
    };
    return _this;
  }

  _createClass(SubMenuWrap, [{
    key: "getSubMenuItemStyle",
    value: // componentWillUnmount() {
    //   this.cacheStyle = null;
    // }

    /**
     * 获取三级菜单的高度, 二级菜单的高度需要和三级菜单对齐
     */
    function getSubMenuItemStyle(subMenu, isLast) {
      var _this$props = this.props,
          _this$props$menuItemH = _this$props.menuItemHeight,
          menuItemHeight = _this$props$menuItemH === void 0 ? defaultMenuItemHeight : _this$props$menuItemH,
          _this$props$leafMenuI = _this$props.leafMenuItemHeight,
          leafMenuItemHeight = _this$props$leafMenuI === void 0 ? defaultLeafMenuItemHeight : _this$props$leafMenuI;
      var cacheKey = "".concat(getMenuKey(subMenu), "-").concat(isLast);

      if (!this.cacheStyle[cacheKey]) {
        var height = Math.ceil(subMenu.children.length / 3);
        this.cacheStyle[cacheKey] = {
          height: leafMenuItemHeight * height + (isLast ? 0 : menuItemHeight / 2)
        };
      }

      return this.cacheStyle[cacheKey];
    }
  }, {
    key: "getSubMenuStyle",
    value: function getSubMenuStyle(menu) {
      var _this2 = this;

      var cacheKey = "sub-menu-".concat(getMenuKey(menu));

      if (!this.cacheStyle[cacheKey]) {
        var subMenuHeight = 42;
        menu.children.forEach(function (subMenu, index) {
          subMenuHeight += _this2.getSubMenuItemStyle(subMenu, index >= menu.children.length - 1).height;
        });
        this.cacheStyle[cacheKey] = {
          height: subMenuHeight
        };
      }

      return this.cacheStyle[cacheKey];
    }
  }, {
    key: "handleLeafMenuClick",
    value: function handleLeafMenuClick(leafMenu, subMenu) {
      var _this$props2 = this.props,
          onLeafMenuClick = _this$props2.onLeafMenuClick,
          menu = _this$props2.menu;

      if (_isFunction(onLeafMenuClick)) {
        onLeafMenuClick(leafMenu, subMenu, menu);
      }
    }
  }, {
    key: "handleLeafMenuMouseEnter",
    value: function handleLeafMenuMouseEnter(subMenu) {
      this.setState({
        hoverSubMenu: subMenu
      });
    }
  }, {
    key: "handleLeafMenuMouseLeave",
    value: function handleLeafMenuMouseLeave(subMenu) {
      var hoverSubMenu = this.state.hoverSubMenu;

      if (hoverSubMenu === subMenu) {
        this.setState({
          hoverSubMenu: null
        });
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props3 = this.props,
          menu = _this$props3.menu,
          activeMenus = _this$props3.activeMenus,
          style = _this$props3.style;
      var hoverSubMenu = this.state.hoverSubMenu;
      return /*#__PURE__*/React.createElement("div", {
        className: classNames(styles['sub-menu-wrap'], _defineProperty({}, styles['sub-menu-wrap-all-only'], menu.allChildrenAreOnlySubMenu), 'cpaas-sub-menu-wrap'),
        style: style
      }, /*#__PURE__*/React.createElement(SubMenu, {
        menu: menu,
        onClick: this.handleLeafMenuClick,
        activeMenus: activeMenus,
        hoverSubMenu: hoverSubMenu,
        minHeight: style.minHeight,
        getSubMenuStyle: this.getSubMenuStyle,
        getSubMenuItemStyle: this.getSubMenuItemStyle
      }), /*#__PURE__*/React.createElement(LeafMenu, {
        menu: menu,
        activeMenus: activeMenus,
        onClick: this.handleLeafMenuClick,
        onMouseEnter: this.handleLeafMenuMouseEnter,
        onMouseLeave: this.handleLeafMenuMouseLeave,
        minHeight: style.minHeight,
        getSubMenuStyle: this.getSubMenuStyle
      }));
    }
  }]);

  return SubMenuWrap;
}(React.PureComponent), (_applyDecoratedDescriptor(_class.prototype, "getSubMenuItemStyle", [_dec], Object.getOwnPropertyDescriptor(_class.prototype, "getSubMenuItemStyle"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "getSubMenuStyle", [_dec2], Object.getOwnPropertyDescriptor(_class.prototype, "getSubMenuStyle"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "handleLeafMenuClick", [_dec3], Object.getOwnPropertyDescriptor(_class.prototype, "handleLeafMenuClick"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "handleLeafMenuMouseEnter", [_dec4], Object.getOwnPropertyDescriptor(_class.prototype, "handleLeafMenuMouseEnter"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "handleLeafMenuMouseLeave", [_dec5], Object.getOwnPropertyDescriptor(_class.prototype, "handleLeafMenuMouseLeave"), _class.prototype)), _class));
export default SubMenuWrap;